<!-- 
  input组件                 zls-2022/06/01
    所有属性、事件、方法、插槽，请参考   https://vant-contrib.gitee.io/vant/#/zh-CN/field
 -->
<template>
  <Field
    class="z-input"
    v-model="data"
    :name="$attrs['name']"
    :label="$attrs['label']"
    :rules="$attrs['rules']"
    :type="$attrs['type'] || 'text'"
    :required="$attrs['required']"
    :clearable="$attrs['clearable'] || true"
    :placeholder="$attrs['placeholder'] || '请输入'"
    :maxlength="$attrs['maxlength'] || 20"
    :disabled="$attrs['disabled']"
    :readonly="$attrs['readonly']"
    :border="$attrs['border']"
    :colon="$attrs['colon']"
    :clickable="$attrs['clickable']"
    :is-link="$attrs['is-link']"
    :autofocus="$attrs['autofocus']"
    :label-width="$attrs['label-width']"
    :autocomplete="$attrs['autocomplete ']"
    :rows="$attrs['rows']"
    :show-word-limit="$attrs['type'] === 'textarea'"
    autosize
    @update:model-value="input"
  >
    <template #left-icon>
      <slot name="left-icon"></slot>
    </template>
    <template #right-icon>
      <slot name="right-icon"></slot>
    </template>
    <template #button>
      <slot name="button"></slot>
    </template>
    <template #extra>
      <slot name="extra"></slot>
    </template>
  </Field>
</template>

<script>
export default { name: 'z-input' }
</script>
<script setup>
import { ref, useAttrs } from 'vue'
import { Field } from 'vant'
const emit = defineEmits(['update:modelValue'])
const attrs = useAttrs()
const data = ref('')
data.value = attrs.modelValue // 第一次渲染时的数据回选

// 实时更新数据
function input(val) {
  data.value = val
  emit('update:modelValue', val)
}
</script>
